<template>
  <div
    ref="p_div"
    style="height:100%"
  >
    <!-- <el-row gutter="20"> -->
    <header-layout class="header-layout" :head_title="'Data Acquisition'"></header-layout>
    <!-- </el-row> -->
    <!-- <el-row gutter="20"> -->
    <tab-table v-model="p_div_style"></tab-table>
    <!-- </el-row> -->
  </div>
</template>
<script>
import TabTable from './DataAcquisitionComponents/DataAcquisitionTable'
export default {
  components: {
    TabTable,
    HeaderLayout: () => import('@/pages/contents/system_configuration/SysComponents/HeaderLayout')
  },
  data () {
    return {
      p_div_style: {
        width: 0,
        height: 0
      }
    }
  },
  mounted () {

    window.onresize = this.handleWindowResize
    this.p_div_style.width = this.$refs.p_div.offsetWidth
    this.p_div_style.height = this.$refs.p_div.offsetHeight
  },
  methods: {
    handleWindowResize () {
      // console.log('resize')
      this.p_div_style.width = this.$refs.p_div.offsetWidth
      this.p_div_style.height = this.$refs.p_div.offsetHeight
    }
  }
}
</script>
<style lang="less" scoped>
@media screen and (max-width: 740px) {
  .header-layout {
    display: none;
  }
}
@media screen and (max-width: 400px) {
  div {
    display: none;
  }
}
</style>